// 作用：用于包裹俩个表单登录，并且页面登录页面的样式效果由组件决定


import React, { Component } from 'react';
import { Card, Tabs } from "antd"
import styled from 'styled-components';
import bg from "../../assets/bg.jpg"
import Passwordlogin from './PasswordLogin';
import Mobilelogin from './MobileLogin';
class Index extends Component {
  constructor(props){
    super(props)
    let jwt = sessionStorage.getItem("jwt")
    if(jwt) {
      this.props.history.push("/dashboard")
    }
  }
  render() {
    const { TabPane } = Tabs;
    return (
      <Container> 
        <LoginForm>
          <Card style={{ borderRadius: 19 }}>
            <Tabs defaultActiveKey="1" centered>
              <TabPane tab="密码登录" key="1">
                <Passwordlogin />
              </TabPane> 
              <TabPane tab="短信登录" key="2">
                <Mobilelogin />
              </TabPane>
            </Tabs>
          </Card>
        </LoginForm>
      </Container>
    );
  }
}
// 整体的大盒子
const Container = styled.div`
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background:url(${bg});
  background-size: 100%;
  padding-top: 18%;
  overflow: hidden;
`

// 登录表单
const LoginForm = styled.div`
  width: 400px;
  margin: 0 auto;
  border-radius: 19px;
`
export default Index;
